<template>
  <view class="wrapper">
		<div class="login">
      <div class="login-container clear-both">
        <!-- <u-tabs v-model="tabActive" class="login-tabs" type="card">
          <u-tab title="登录">
            <login-tab v-if="!isPhoneLogin" btn-text="登录" @success-valid="onLogin" />
            <register-tab v-if="isPhoneLogin" btn-text="登录" @success-valid="onLogin" />
          </u-tab>
          <u-tab title="注册">
            <register-tab btn-text="注册" @success-valid="onRegister" />
          </u-tab>
        </u-tabs> -->
		<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<register-tab btn-text="登录" @success-valid="onRegister" />
			</swiper-item>
			<swiper-item class="swiper-item">
				<register-tab btn-text="注册" @success-valid="onRegister" />
			</swiper-item>
		</swiper>
      </div>
      <div class="login-bar">
        <template v-if="tabActive === 0 && !isPhoneLogin">
          <span class="login-bar__item" @click="isPhoneLogin = true">快捷登录</span>
          <span style="margin: 0 8px">|</span>
          <span class="login-bar__item" @click="$router.push('/login/recover-password')">
            忘记密码
          </span>
        </template>
        <template v-if="tabActive === 0 && isPhoneLogin">
          <span class="login-bar__item" @click="isPhoneLogin = false">账号密码登录</span>
        </template>
      </div>
	  </div>
  </view>
</template>

<script>
  import { mapActions, mapGetters } from 'vuex';
  // import LoginTab from '@components/modules/login/login-tab/index';
  import RegisterTab from '@components/modules/login/register-tab/index';
  import { getUrlParams } from '@common/utils';

  export default {
    components: { RegisterTab },
    data() {
      return {
        urlParams: getUrlParams(),
        tabActive: 0,
        isPhoneLogin: false,
		list: [
			{
				name: '登录'
			},
			{
				name: '注册'
			}
		],
		current: 0,
		swiperCurrent: 0
      };
    },
    computed: mapGetters('user', ['userWx']),
    methods: {
      ...mapActions('user', ['userLogin', 'userRegister']),
      onLogin(form) {
        const { placeId } = this.urlParams;
        const { id: wxUserId } = this.userWx;
        const loading = this.$toast.loading('加载中...');

        this.userLogin({ ...form, wxUserId, placeId })
          .then(({ success, msg, data }) => {
            if (!success) return this.$toast(msg);

            this.$nextTick(() => this.$router.replace('/home'));
          })
          .finally(() => loading.clearLoading());
      },
      onRegister(form) {
        const { placeId } = this.urlParams;
        const { id: wxUserId } = this.userWx;
        const loading = this.$toast.loading('加载中...');

        this.userRegister({ ...form, wxUserId, placeId })
          .then(({ success, msg, data }) => {
            if (!success) return this.$toast(msg);

            this.$nextTick(() => this.$router.replace('/home'));
          })
          .finally(() => loading.clearLoading());
      },
	  tabsChange(index) {
		this.swiperCurrent = index;
	  },
	  // swiper-item左右移动，通知tabs的滑块跟随移动
	  transition(e) {
	  	let dx = e.detail.dx;
	  	this.$refs.uTabs.setDx(dx);
	  },
	  // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
	  // swiper滑动结束，分别设置tabs和swiper的状态
	  animationfinish(e) {
	  	let current = e.detail.current;
	  	this.$refs.uTabs.setFinishCurrent(current);
	  	this.swiperCurrent = current;
	  	this.current = current;
	  },
	  // scroll-view到底部加载更多
	  onreachBottom() {
	  	
	  }
    }
  };
</script>

<style scoped lang="less">
  @fieldActiveHighlightBg: linear-gradient(0deg, #2fe1b7, #2fe1b7) no-repeat left center/2px 1em
    transparent;

  .select-role {
    display: inline-flex;
    align-content: center;
    font-size: 15px;
    line-height: 20px;
    color: #fff;

    .van-icon {
      margin-left: 5px;
    }
  }

  .login {
    padding: 30px 25px;
    background: url('~@static/login/background/top@2x.png') no-repeat left top/100%;

    /deep/ .clear-field-icon {
      display: inline-block;
      width: 17px;
      height: 17px;
      vertical-align: middle;
      background: url('~@static/login/icon/close@2x.png') no-repeat center center/cover;
      opacity: 0;
      transition: opacity 0.2s linear;
    }

    &-container {
      padding: 0 22px 45px;
      margin-top: 60px;
      background-color: #fff;
      border-radius: 9px;
      box-shadow: 0 3px 6px 0 rgba(1, 38, 41, 0.1);
    }

    &-tabs {
      /deep/ .van-tabs__wrap {
        height: auto;
      }

      /deep/ .van-tabs__nav {
        align-items: center;
        justify-content: center;
        margin: 32px 0 35px;
        border: none;
      }

      /deep/ .van-tab {
        display: inline-block;
        flex: none;
        padding: 0;
        margin: 0 17px;
        font-size: 17px;
        line-height: 24px;
        color: #73757c;
        vertical-align: middle;
        background: transparent;
        border: none;
        transition: all 0.2s linear;

        &.van-tab--active {
          font-size: 24px;
          font-weight: 500;
          color: #171719;
          background: transparent;
        }
      }
    }

    &-form {
      position: relative;

      /deep/ .is-active-highlight .van-field__control {
        padding: 0 4px;
        color: #151414;

        &:active,
        &:focus {
          background: @fieldActiveHighlightBg;
        }

        &::placeholder {
          font-size: 15px;
          color: #afadad;
        }
      }

      /deep/ .is-active-highlight.is-active .van-field__control {
        background: @fieldActiveHighlightBg;
      }

      /deep/ .van-cell.is-active .clear-field-icon {
        opacity: 1;
      }
    }

    /deep/ &-captcha-btn {
      width: 52px;
      height: 24px;
      font-size: 13px;
      color: #5ccc2b;
      vertical-align: top;
    }

    /deep/ &-protocol {
      &::after {
        content: none;
      }

      /deep/ .van-checkbox__label {
        margin-left: 4px;
        font-size: 13px;
        color: #73757c;
      }

      &__link {
        color: #5ccc2b;
      }

      &__checkbox {
        display: inline-block;
        width: 14px;
        height: 14px;
        font-size: 14px;
        transition: background 0.2s linear;

        &.is-active {
          background: url('~@static/login/icon/checked@2x.png') no-repeat center center/
            cover;
        }

        &::after {
          border-color: #888;
          border-radius: 50%;
        }
      }
    }

    /deep/ &-submit {
      position: absolute;
      top: 100%;
      right: 0;
      left: 0;
      width: 170px;
      height: 48px;
      margin: 20px auto 0;
      font-size: 17px;
      color: #fff;
      background: url('~@static/login/background/submit@2x.png') no-repeat center
        center/cover;
      border: none;
    }

    &-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 40px;
      font-size: 13px;
      line-height: 20px;
      color: #9799a3;

      &__item {
        padding: 0 4px;
      }

      &__item:hover,
      &__item:active {
        color: #888;
      }
    }
  }
</style>
